<template>
    <div class="cc">
        <input v-model="Surname" placeholder="姓" />
        <input v-model="Name" placeholder="名" />

        <p>姓名:{{ fullName }}</p>
    </div>
</template>

<script setup>
import {ref, computed} from 'vue'

const Surname = ref('')
const Name = ref('')

const fullName = computed(() => {
    return Surname.value + Name.value +  ` 字数:${Surname.value.length + Name.value.length}`
})

</script>

<style scoped>
.cc{
    background-color: rgb(248, 229, 231);
    padding:20px;
    border-radius:10px;
}
</style>